<template>
	<div class="login-container">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="login-ruleForm">
			<h3>商城管理系统</h3>
			<el-form-item label="账号" prop="username">
				<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width: 100%;" @click="submitForm()">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import {loginApi,getAdminInfo} from "../../request/api.js"
import {ADDUSERINFO} from '../../store/mutations-type.js'
export default {
	data() {
		return {
			ruleForm: {
				username:'',
				pass:''
			},
			rules: {
				username:[
					{required:true,message:"请输入账号",trigger:"blur"}
				],
				pass:[
					{required:true,message:"请输入密码",trigger:"blur"}
				]
			},
		}
	},
	methods:{
		submitForm(){
			/* this.$refs['ruleForm'].validate((vali)=>{
				console.log(vali)
			}) */
			this.$refs['ruleForm'].validate().then((vali)=>{
				// 校验成功
				// console.log(vali)
				loginApi({
					username:this.ruleForm.username,
					password:this.ruleForm.pass
				}).then(res=>{
					// console.log(res)
					if(res.code == 200){
						// 把token存入sessionStorage
						sessionStorage.setItem('token',res.data.tokenHead+res.data.token)
						// 获取当前用户的个人信息
						getAdminInfo().then(res=>{
							if(res.code==200){
								this.$router.push('/home')
								this.$store.commit(ADDUSERINFO,res.data)
							}
						})
					};
				})
			}).catch((err)=>{
				// 校验失败
				console.log(err)
			})
		}
	}
}
</script>
<style scoped="scoped" lang="less">
.login-container{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: #2d3a4b;
	h3{
		padding: 15px 0;
		text-align: center;
		color: #FFFFFF;
	}
	.login-ruleForm{
		width: 400px;
		.el-form-item__label{
			color: #FFFFFF;
		}
	}
}
</style>
